<template>
  <div class="app-popup">
    <van-popup v-model:show="isLogin" class="app-popup-login" position="left">
      <div class="app-popup-login-page1" v-if="nowPage_register == 0">
        <h1 style="margin-top:5.465rem">登录</h1>
        <van-form class="login" @submit="onSubmit">
          <van-cell-group inset class="login-input">
            <van-field
              class="input-bar"
              name="userName"
              placeholder="请输入用户名"
              left-icon="user-o"
              v-model="userName"
            />
          </van-cell-group>
          <van-cell-group inset class="login-input">
            <van-field
              class="input-bar"
              name="userPasswd"
              placeholder="请输入密码"
              left-icon="shield-o"
              type="password"
              v-model="userPasswd"
            />
          </van-cell-group>
          <van-cell-group inset class="login-buttonGroup">
            <van-button round block type="primary" native-type="submit">登录</van-button>
          </van-cell-group>
        </van-form>
        <p>没有账号？<a @click="++nowPage_register" href="#">立即注册！</a></p>
      </div>
      <div class="app-popup-login-page2" v-else-if="nowPage_register == 1">
        <van-nav-bar class="step-back" @touchstart="--nowPage_register">
          <template #left>
            <van-icon class="step-back-icon" class-prefix="aliIconfont" name="icon-jiantou_qiehuanzuo"/>
          </template>
        </van-nav-bar>
        <h1>注册</h1>
        <van-form class="register" @submit="onRegister">
          <van-cell-group inset class="login-input">
            <van-field
              class="input-bar"
              name="userNameRej"
              placeholder="请输入用户名"
              left-icon="user-o"
              v-model="userNameRej"
            />
          </van-cell-group>
          <van-cell-group inset class="login-input">
            <van-field
              class="input-bar"
              name="userPasswdRej"
              placeholder="请输入密码"
              left-icon="shield-o"
              type="password"
              v-model="userPasswdRej"
            />
          </van-cell-group>
          <van-cell-group inset class="login-input">
            <van-field
              class="input-bar"
              name="userRePasswdRej"
              placeholder="请再次输入密码"
              left-icon="shield-o"
              type="password"
              v-model="userRePasswdRej"
            />
          </van-cell-group>
          <van-cell-group inset class="login-buttonGroup">
            <van-button round block type="primary" native-type="submit">注册</van-button>
          </van-cell-group>
        </van-form>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { Notify, Toast, NavBar, Popup, Form, Field, CellGroup,  Button, Icon } from "vant";
import { onMounted, ref } from "vue";
import { useStore } from "vuex";
import {  useRouter } from "vue-router"
import { login, register, checkLogin } from "@/service/user";
export default {
  setup(){
    const userName = ref('');
    const userPasswd = ref('');
    const userNameRej = ref('');
    const userPasswdRej = ref('');
    const userRePasswdRej = ref('');
    const router = useRouter();
    const store = useStore();
    let nowPage_register = ref(0);
    let isLogin = ref(true);
    const onSubmit = (values)=>{
      if(values.userName == '' || values.userPasswd == ''){
        Notify("用户名或密码不能为空");
      }else{
        login({
          userName:userName.value,
          userPasswd:userPasswd.value
        }).then(res=>{
          switch(res.status){
            case 200:
              Toast.success("登录成功");
              isLogin.value = false;
              store.commit('setIsLogin',true)
              if(res.userInfo.isNew){
                router.push({
                  path:'/hobby'
                })
              }else{
                router.push({
                  path:"/discovery"
                })
              }
              break;
            case 401:
              Notify(res.message);
              break;
          }
        })
      }
    }
    const onRegister = (values)=>{
      if(values.userNameRej == '' || values.userPasswdRej == ''){
        Notify("用户名或密码不能为空");
      }else if(values.userPasswdRej != values.userRePasswdRej){
        Notify("两次密码不一致");
      }else{
        register({
          userNameRej:userNameRej.value,
          userPasswdRej:userPasswdRej.value
        }).then(res=>{
          switch(res.status){
            case 200:
              userNameRej.value = "";
              userPasswdRej.value = "";
              userRePasswdRej.value = "";
              --nowPage_register.value
              break;
            case 401:
              Notify(res.message);
              break;
          }
        })
      }
    }
    onMounted(()=>{
      checkLogin().then(res=>{
        if(res.status == 200){
          isLogin.value = false;
          store.commit('setIsLogin',true);
          if(res.userInfo.isNew){
            router.push({
              path:'/hobby'
            })
          }else{
            router.push({
              path:"/discovery"
            })
          }
        }else{
          isLogin.value = true
        }
      })
    })
    return {
      userName,
      userPasswd,
      userNameRej,
      userPasswdRej,
      userRePasswdRej,
      isLogin,
      nowPage_register,
      onSubmit,
      onRegister
    }
  },
  components: {
    [Popup.name]:Popup,
    [Form.name]:Form,
    [Field.name]:Field,
    [CellGroup.name]:CellGroup,
    [Button.name]:Button,
    [NavBar.name]:NavBar,
    [Icon.name]:Icon
  },
}
</script>
<style lang="less">
.login{
  margin-top: 12.5rem;
}
.register{
  margin-top: 8.375rem;
}
.login,.register{
  .login-input{
    border-radius: 25rem;
    margin-bottom: 1.25rem;
    background: none;
  }
  .input-bar{
    padding: .9375rem;
    border-radius: 25rem;
    box-shadow: .125rem .125rem .125rem inset #9999;
    >.van-field__left-icon{
      padding: 0 .3125rem 0 .9375rem;
      transform: scale(1.5);
      &:after{
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        height: .625rem;
        border-right: .0625rem solid #E8E8E8;
      }
    }
    >.van-cell__value{
      font-size: 1.0625rem;
      padding: 0 .9375rem 0 .9375rem;
    }
  }
  >.login-buttonGroup{
    border-radius: 25rem;
    box-shadow: .125rem .125rem .125rem #9999;
    button{
      padding: .9375rem;
      border: none;
      font-size: 1.25rem;
      background: #FFD591;
    }
  }
}
.app-popup-login{
  width: 100%;
  height: 100%;
  background: orange;
}
.step-back{
  padding: .625rem 0;
  background: none;
  .step-back-icon{
    font-size: 1.875rem;
    color:#ffff;
  }
  &::after{
    border: none;
  }
}
</style>